<template>
	<div class="list">
		<div class="item">
			<div class="title">当天车次</div>
			<div class="total">
				<div class="number DIN">141</div>
				<div class="unit">次</div>
			</div>
		</div>
		<div class="item">
			<div class="title">到达车次</div>
			<div class="total">
				<div class="number DIN">70</div>
				<div class="unit">次</div>
			</div>
		</div>
		<div class="item">
			<div class="title">发送车次</div>
			<div class="total">
				<div class="number DIN">71</div>
				<div class="unit">次</div>
			</div>
		</div>
		<div class="item">
			<div class="title">当天人数</div>
			<div class="total">
				<div class="number DIN">4.06</div>
				<div class="unit">万/人</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { ref } from 'vue'
</script>

<style lang="scss" scoped>
	.list {
		padding: 0 25px;
	}
	.item {
		height: 273px;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		padding-left: 600px;

		// $background-images: (
		// 	'@img/global/bus1.png',
		// 	'@img/global/bus2.png',
		// 	'@img/global/bus3.png',
		// 	'@img/global/person4.png'
		// );
		// @for $i from 1 through length($background-images) {
		// 	&:nth-child(#{$i}) {
		// 		background-image: url(nth($background-images, $i));
		// 		background-size: 100% 100%;
		// 	}
		// }
		.number {
			margin-left: 100px !important;
		}
		&:nth-child(1) {
			margin-top: 52px;
			.number {
				font-weight: bolder;
				font-size: 67px;
				letter-spacing: 5.6px;
				background: linear-gradient(180deg, #ffffff 29%, #17caff 74%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
				margin-left: 200px;
			}
			.unit {
				font-size: 38px;
				margin-left: 20px;
				color: #178fe5;
			}
		}
		&:nth-child(2) {
			.number {
				font-weight: bolder;
				font-size: 67px;
				background: linear-gradient(180deg, #ffffff 29%, #17ffca 74%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
				margin-left: 200px;
			}
			.unit {
				font-size: 38px;
				margin-left: 20px;
				color: #17e5e2;
			}
		}
		&:nth-child(3) {
			.number {
				font-weight: bolder;
				font-size: 67px;
				letter-spacing: 5.6px;

				background: linear-gradient(180deg, #ffffff 29%, #b6b6b6 74%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
				margin-left: 200px;
			}
			.unit {
				font-size: 38px;
				margin-left: 20px;
				color: #8f9295;
			}
		}

		&:nth-child(4) {
			margin-bottom: 65px;
			.number {
				font-weight: bolder;
				font-size: 67px;
				letter-spacing: 5.6px;
				background: linear-gradient(180deg, #ffffff 29%, #17caff 74%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
			}
			.unit {
				font-size: 38px;
				margin-left: 20px;
				color: #178fe5;
			}
		}
		&:nth-child(n + 2) {
			margin-top: 34px;
		}
		.title {
			font-size: 43px;
			width: 200px;
		}
		.total {
			display: flex;
			align-items: end;
		}
	}
</style>
